
import Configer from "../../../script/frame/apiModel/config/Configer";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import {AchievementData, AchievementType} from "../../../script/frame/dataSource/DataModel";
import {SelectItemMap, UIConfigKey} from "../../../script/constant/UIConfig";
import * as React from "../../../script/frame/apiModel/gui/React";
import {GuiId, GuiKeys} from "../../../script/controller/model/ControllerOpt";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import {TalentBarInterface} from "../../interface/GuiInterface";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";
import PageContent, {PageContentType} from "../component/PageContent";
import {TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";
import {publicGui} from "../../interface/PublicGui";

interface IProp {
    pageContentType: PageContentType;
    getAchFun: (player: PlayerModel) => { [key: string]: number }
}
interface IState {
    achs: {[p: string]: number};

    title: string;
    subTitle: string;
    des: string
    infoVisible: boolean;
    x: number;
    y: number;
}
export default class TalentBarPage extends TalentBarInterface<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            visible: false,
            achs: {},

            infoVisible: false,
            title: "",
            subTitle: '',
            des: '',
            x: 0,
            y: 0,
        }
    }


    render = () => {
        const talentBarBoard = Configer.getResource(ResourceKey.talentBarBoard);
        const backSize = { h: 0.58100, w: 0.37500 };
        const iconSize = { h: 0.06, w: 0.04 }
        const backPos = { x: 0.33, y: 0.166 }
        const allAch = DataRouter.getAchievementDatas();
        const maxAchNum = allAch.length;
        const fontSize = Configer.getUIConfig(UIConfigKey.fontSize) as number;
        const disableBlp = Configer.getResource(ResourceKey.disableBlp);
        const unknowBlp = Configer.getResource(ResourceKey.unknowBlp);

        const onePageNum = 20;

        let achItems: SelectItemMap[] = Configer.getUIConfig(UIConfigKey.talentGuiItemMaps);

        const talents: AchievementData[] = [];

        for (let i = 0; i < maxAchNum; i++) {
            const achData = allAch[i];
            const type = achData.type;
            if (type === AchievementType.talent) {
                if (achData && achData.id?.length > 0) {
                    talents.push(achData);
                }
            } else {
                continue;
            }
        }

        const lvH = 0.0166;
        const lvW = 0.01875;

        return <PageContent  type={this.props.pageContentType} closeFun={this.close}  pos={backPos}  key={GuiKeys.pageContentTalent}  hidden={!this.state.visible} selectItemMap={achItems} onePageNum={onePageNum} elementsFun={
            (selectKey: number) => {
                return talents.map(
                    (achData, index, array) => {
                        // const type = achData?.type;
                        if (achData && achData.id?.length > 0) {
                            const achId = achData.id;
                            const iconPath = achData?.iconPath;
                            const resourceData = DataRouter.getResourceDataByResourceId(iconPath);
                            let backgroundImage = resourceData?.src;

                            const title = achData.name;
                            const des = achData.descript;

                            let hidden = false;
                            let mask = disableBlp;
                            let achNum = 0;
                            if (this.state.achs && this.state.achs[achId]) {
                                achNum = this.state.achs[achId];
                            }
                            if (achNum && achNum > 0) {
                                mask = '';
                            } else {
                                backgroundImage = unknowBlp;
                                hidden = true;
                            }
                            return <View   onMouseEnter={(event) => { this.showInfoPage(title, '', des, event.x + iconSize.w, event.y, hidden) }} onMouseLeave={this.closeInfoPage} key = {`${GuiKeys.talentBarItem}|${index}`} style={{ hidden: hidden, mask, backgroundImage: backgroundImage, width: iconSize.w, height: iconSize.h, marginT: 0.008, marginL: 0.008 }}>
                                <View   key={`${GuiKeys.talentBarItemNum}|${index}`} style={{ hidden: (achNum === 0) , fontAlign: TextAlign.center, backgroundImage: disableBlp ,fontSize: lvH, width: lvW, height: lvH, float: true, marginT: iconSize.h - lvH - 0.001, marginL:  iconSize.w - lvW }}>{`${achNum}`}</View>
                            </View>
                        }
                        return <View   key = {`${GuiKeys.talentBarItem}|${index}`} style={{ hidden: true }}>
                            <View   key={`${GuiKeys.talentBarItemNum}|${index}`} style={{ hidden: true }}></View>
                        </View>
                    }
                )
            }
        }>
        </PageContent>
    }

    showInfoPage = (title: string, subTitle: string, des: string, x: number, y: number, hidden: boolean) => {
        if (hidden) {
            return;
        }
        if (!CodeUtil.isNullOrZero(title)) {
            publicGui.showInfoPage(x, y, title, subTitle, des);
        }
    }

    closeInfoPage = () => {
        publicGui.closeInfoPage();
    }

    closeBar = () => {
        this.setState({
            ...this.state,
            visible: false,
        })
    }
    openBar = () => {
        const achs = this.props.getAchFun(PlayerFactory.getInstance().getLocalPlayer());
        this.setState({
            ...this.state,
            visible: true,
            achs,
        })
    }

    getVisible = () => {
        return this.state.visible;
    }

    close = () => {
        const syncData: UISyncData = { id: SyncId.closeUI, param: { guiId: GuiId.talentBar } };
        return syncData;
    }
}